import Start from './Start'
import Rule from './Rule'
import Action from './Action'
import End from './End'
import Add from './Add'

const Step = (props) => {
  const { step, type = 'start', top = 0, left = 0, width = 150 } = props

  return (
    <div
      style={{
        position: 'absolute',
        top: `${top}px`,
        left: `${left}px`,
      }}
    >
      {step === 'start' && <Start />}
      {step === 'action' && <Action />}
      {step === 'rule' && <Rule />}
      {step === 'end' && <End />}
      {step !== 'rule' && step !== 'end' && (
        <Add
          style={{
            position: 'absolute',
            top: `60px`,
            left: 0,
          }}
        />
      )}
      {step === 'rule' && (
        <Add
          style={{
            position: 'absolute',
            top: `60px`,
            left: -width,
          }}
        />
      )}
      {step === 'rule' && (
        <Add
          style={{
            position: 'absolute',
            top: `60px`,
            left: width,
          }}
        />
      )}
    </div>
  )
}

export default Step
